<template>
  <div>
    <div class="container clearfix">
      <div class="menu_sub">
        <div class="in clearfix">
          <router-link to="/news/a" exact class="menu_sub_link news_1">最新政策
          </router-link>
          <router-link to="/news/b" class="menu_sub_link news_2">乐政要闻
          </router-link>
        </div>
      </div>
    </div>
    <div class="banner"></div>
    <div class="menu_bar">
      <div class="container clearfix">
        <div class="right fr">
          当前位置：首页 > 乐政要闻
        </div>
      </div>
    </div>
    <div class="container news_a clearfix">
      <template v-for="item in news">
        <div class="item">
          <div class="img">
            <img :src=item.img alt="">
            <router-link :to="item.link">
              <div class="inner_bg">
                <div class="ball-beat">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
                <div class="text">查看详情</div>
              </div>
            </router-link>
          </div>
          <div class="info">
            <router-link :to="item.link">
              <div class="title fof">{{item.title}}</div>
            </router-link>
            <div class="intro">{{item.intro}}</div>
            <div class="date">{{item.date}}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        news: [
          {
            date: '2017-06-26',
            img: 'http://www.joygov.com/upload/news_img03.png',
            intro: '【导读】这其实是在一场深化“放管服”与互联网+政务体系建设经验交流会上，一名来自具有丰富互联网+政务服务行业积淀和经验企业…',
            title: '四川智美高科在全国深化“放管服”与互联网+…',
            link: 'b/newsBdetail1'
          },
          {
            date: '2016-11-25',
            img: 'http://www.joygov.com/upload/news_img01.jpg',
            intro: '【导读】喜大普奔！由武侯区政务中心与智美高科联手打造的政务APP首发上线啦！乐政是依托互联网，打造的互联网+政务服务新平台…',
            title: '武侯区政务中心与智美高科联手打造的乐政APP…',
            link: 'b/newsBdetail2'
          },
          {
            date: '2016-11-25',
            img: 'http://www.joygov.com/upload/news-img02.jpg',
            intro: '【导读】今日，小编跟着乐政工作人员一起来到了市民魏先生的公司，就发生了这样一件令小编激动的事情…',
            title: '成都市第一个享受免费上门办件的市民都收到件了…',
            link: 'b/newsBdetail3'
          }
        ]
      }
    }
  }
</script>


<style scoped>
.news_a {
  padding: 30px 0;
}

.news_a .item {
  float: left;
  margin-right: 24px;
  margin-bottom: 30px;
  width: 382px;
  border: 1px solid #e3e3e3;
  transition: .3s;
}

.news_a .item:hover {
  transform: translateY(-20px);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
}

.news_a .item:nth-child(3n) {
  margin-right: 0;
}

.news_a .item .img {
  position: relative;
  width: 100%;
  height: 240px;
}

.news_a .item .img img {
  width: 100%;
  min-height: 100%;
  height: auto;
}

.news_a .item .img .inner_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  padding: 93px 0;
  opacity: 0;
  color: #fff;
  font-size: 18px;
  text-align: center;
  transition: .4s;
}

.news_a .item .inner_bg:hover {
  opacity: .9;
  background: rgb(217, 46, 36);
}

.news_a .item .inner_bg:hover .ball-beat>div {
  opacity: 1;
  transform: translateY(0)
}

.news_a .item .inner_bg:hover .text {
  opacity: 1;
  transform: translateY(0)
}

.ball-beat {
  margin-bottom: 6px;
}

.ball-beat>div {
  width: 8px;
  height: 8px;
  margin: 2px;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: translateY(-20px);
  transition: .3s .3s;
}

.news_a .item .inner_bg .text {
  opacity: 0;
  transform: translateY(20px);
  transition: .3s .3s;
}

.news_a .item .info {
  position: relative;
  padding: 20px;
  background: #fff;
}

.news_a .item .info::after {
  content: '';
  position: absolute;
  top: -30px;
  right: 15px;
  width: 0;
  height: 0;
  border-color: transparent transparent #fff transparent;
  border-style: solid;
  border-width: 15px 15px 15px 15px;
}

.news_a .item .title {
  margin-bottom: 5px;
  width: 100%;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.news_a .item .intro {
  font-size: 14px;
  color: #999;
  text-align: left;
  line-height: 25px;
  height: 75px;
}

.news_a .item .date {
  text-align: right;
  font-size: 14px;
  color: #999;
}
</style>
